<template>
  <AppCover section="motto" :bgURL="coverURL" :bgPrURL="coverPrURL" />
  <div id="Classic">
    <ul>
      <li
        class="list-item"
        v-for="(item, index) in list" 
        :key="index"
      >
        <div 
          class="content"
          :style="backgroundColor(item.classify)"
          :class="{ 'arrowStyle1':item.classify === 1, 'arrowStyle2':item.classify === 2, 'arrowStyle3':item.classify === 3 }"
        >
          <div class="motto_con">
            <p class="motto">
              {{ item.motto }}
            </p>
          </div>              
          <p class="motto_ref">《{{ item.mottoRef }}》</p>
          <div class="divider_line"></div>
          <div class="interactive">
            <span 
              class="iconfont icon-xihuan" 
              :class="{islike: isLike(item)}"
              @click="likeHandler(item._id)"
            >
              <span class="num">{{ likeCount(item) }}</span>
            </span>
            <span class="iconfont icon-shoucang" v-show="false"></span>
          </div>
          <div class="clear"></div>
        </div>
        <div class="classify_icon">{{ getClassify(item.classify) }}</div>
      </li>
    </ul>
    <div class="pager">
      <el-pagination
        layout="prev, pager, next"
        :total="totalCount"          
        :page-size="pageSize"
        background:false
        hide-on-single-page
        @prev-click="prevPageHandler"
        @next-click="nextPageHandler"
        @current-change="curPageHandler"
      >
      </el-pagination>
    </div>
    <AppMsgBoard :section="sectionVal" />    
  </div>
  <AppNav />
  <AppFooter />
</template>

<script>
import AppNav from '@/components/AppNav'
import AppCover from '@/components/AppCover'
import AppFooter from '@/components/AppFooter'
import AppMsgBoard from '@/components/AppMsgBoard'

export default {
  name: 'Classic',
  components: { AppNav, AppCover, AppFooter, AppMsgBoard },
  data(){
    return{
      sectionVal: 'classic',
      coverURL: '/files/img/section_cover/motto.jpg',
      coverPrURL: '/files/img/section_cover/motto_pr.jpg',
      curPage: 0,
      pageSize: 10,  // 每页显示的条目数量
      totalCount: 0, // 留言总数
      borderColor: '#e6e6fa transparent transparent',
      list:[]
    }
  },
  created(){
    this.getClassic()
  },
  mounted(){
    this.monitorClientWidth()
  },
  updated(){
    this.monitorClientWidth()
  },
  methods: {
    // 监听可视区宽度
    monitorClientWidth(){      
      this.setWidthForWX()
      window.onresize = () => {
        this.setWidthForWX()
      }
    },
    // 设置微信浏览器内的宽度
    setWidthForWX(){
      if(document.body.clientWidth <= 600){
        let sUserAgent = navigator.userAgent.toLowerCase()
        let isWXBrowser = /micromessenger/.test(sUserAgent)
        if(isWXBrowser){
          if (sUserAgent.indexOf('android') > -1 || sUserAgent.indexOf('linux') > -1) {
            //安卓手机
            $('.list-item').css('max-width','24rem')
            $('.content').css('max-width','22rem')
          } else if (sUserAgent.indexOf('iphone') > -1) {
            //苹果手机
            $('.list-item').css('max-width','28rem')
            $('.content').css('max-width','26rem')
          }          
        }
      }
    },
    // 请求经典数据
    async getClassic(){
      let {data} = await this.$axios({
        method: 'post',
        url: '/motto/get',
        data: {
          pageSize: this.pageSize,
          curPage: this.curPage
        }
      })
      this.list = data.data.data
      this.totalCount = data.data.totalCount

      setTimeout(() => {
        this.$zh_tran(localStorage.getItem('lang'))
        this.$setFont("#app", "SourceHanSerifCN-Medium")
      }, 200)
      // console.log(this.list);
    },
    async likeHandler(id){
      // console.log(id + "-" + returnCitySN["cip"])
      let ip = returnCitySN["cip"]
      let {data} = await this.$axios({
        method: 'post',
        url: '/motto/like',
        data: {
          id,
          ip
        }
      })

      if(data.code){
        return this.$message.error(data.msg)
      }
      this.getClassic()
    },
    // 是否是当前IP点赞
    isLike(item){
      let ip = returnCitySN["cip"]
      if(!ip) return false
      return item.likes && item.likes.indexOf(ip) != -1
    },
    // 点赞数
    likeCount(item){
      if(!item.likes) return ""
      if(item.likes.length === 0)
        return ''      
      return item.likes.length
    },
    // 获取分类
    getClassify(value){
      switch(value){
        case 1:
          return "儒"
        case 2:
          return "释"
        case 3:
          return "道"
      }
    },
    // 当前页
    curPageHandler(cpage){
      this.getShowList(cpage)
    },
    // 上一页
    prevPageHandler(cpage){
      this.getShowList(cpage)
    },
    // 下一页
    nextPageHandler(cpage){
      this.getShowList(cpage)
    },
    // 翻页请求数据
    getShowList(cpage){
      this.curPage = cpage - 1
      this.getClassic()
    },
    // 设置泡泡背景色
    backgroundColor(value){
      switch(value){
        case 1:
          return {
            backgroundColor: '#9DB8E0'
          }
        case 2:
          return {
            backgroundColor: '#fffec9'
          }
        case 3:
          return {
            backgroundColor: '#bdf0ed'
          }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@pageWidth: 48rem;

#Classic{
  width: @pageWidth;
  margin: 3rem auto;
  ul{
    margin: 0 auto;
    li{
      position: relative;
      width: 40rem;
      margin: 2rem 5px 2rem 5.5rem;
      .content{
        position: relative;
        background-color: #e6e6fa;
        border-radius: 8px;
        padding: 10px;
        filter: drop-shadow(0 0 2px #999);
        transition: all 0.3s ease 0s;
        width: 34rem;
        .motto_con{
          margin: 0 auto;
          .motto{            
            display: inline-block;
            text-align: left;
            color: #000;
            font-size: 2rem;
            padding: 0 10px;
          }
        }
        .motto_ref{
          font-size: 1.2rem;
          text-align: right;
          margin: 5px auto;
        }
        .divider_line{
          height: 1px;
          background-color: rgba(0,0,0,0);
          border-bottom: 1px dashed #fff;
          margin: 5px auto;
        }
        .interactive{
          float: right;
          .iconfont{
            font-size: 1.6rem;
            padding: 0 8px;
            cursor: pointer;
            color: #cfc7c7;
            .num{
              font-size: 1rem;
              color: #372a2a;
              margin-left: 3px;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }
          }

          .icon-xihuan.islike{
            color: #ff6037;
          }
        }
        &:hover{
          transform: translateY(-3px);
        }
        &::after{
          content: '';
          position: absolute;
          width: 0; 
          height: 0; 
          font-size: 0; 
          border-width: 15px; 
          border-style: solid; 
          border-color: #e6e6fa transparent transparent;
          overflow: hidden;
          left: -30px;
          top: 10px;
          transform: rotate(90deg);
        }
      }

      .arrowStyle1{
          &::after{
            border-color: rgb(157, 184, 224) transparent transparent;
          }
        }
        .arrowStyle2{
          &::after{
            border-color: rgb(255, 254, 201) transparent transparent;
          }
        }
        .arrowStyle3{
          &::after{
            border-color: rgb(189, 240, 237) transparent transparent;
          }
        }
      
      .classify_icon{
        position: absolute;
        width: 50px;
        height: 50px;
        left: -70px;
        top: 25px;
        border: 1px solid #3f3f3f;
        border-radius: 50%;
        font-size: 25px;
        text-align: center;
        color: #3f3f3f;
        // font-family: 'Source_Regular', Arial, sans-serif;
        line-height: 50px;
        filter: drop-shadow(0 0 2px #999);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    }
  }

  .pager{
    margin-top: 15px;
  }
}

:deep(.el-pagination .btn-next, .el-pagination .btn-prev){
  background-color: transparent;
}

:deep(.el-pagination button:disabled){
  background-color: transparent;
}

:deep(.el-pager li){
  background-color: transparent;
}

:deep(.el-pagination .btn-prev){
  background-color: transparent;
}

/* 很小的设备（手机等，小于 599px） */
@media only screen and (max-width: 599px) { 
  #Classic {
    max-width: 100vw;
  }
 
  #Classic ul li{
    // margin: 2rem 5px 2rem 7.4rem;
    margin-left: 74px;
    max-width: 26rem;
  }  
  #Classic ul li .content{
    max-width: 24rem;
  }
}

/* iphone6、7、8plus判断 小于600大于414 */
@media only screen and (max-width: 600px) and (min-width:414px){
  #Classic ul li{
    margin: 2rem 5px 2rem 7.4rem;
    max-width: 32rem;
  }  
  #Classic ul li .content{
    max-width: 30rem;
  }
}

/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) { 
  #Classic {
    min-width: 34rem;
  }
}

/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) { 
  #Classic {
    min-width: 38rem
  }
}

/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) { 
  #Classic {
    min-width: 44rem;
  }
}

/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) { 
  #Classic {
    min-width: 48rem;
  }
}
</style>